import React, { Component } from 'react'
import { connect } from "react-redux"
import { rclass } from "../../../types/index"
import { Button } from 'antd'
import axios from "../../../util/axios"
interface Iprops {
    cartlist: rclass[],
    changeNum:(flag:boolean,id:number)=>void,
    changeFlagy:(checked:boolean,id:number) =>void,
    checkAll:boolean,
    checkAllflag:(checkall:boolean)=>void
}
export class Cart extends Component<Iprops> {
    
    render() {
        let { cartlist,checkAll } = this.props
        return (
            <div className="cart-page wrap">
                <header>购物车（{cartlist.length}）</header>
                <main>
                    {
                        cartlist.length && cartlist.map((item: rclass) => {
                            return (
                                <dl className="cart-item" key={item.id}>
                                    <input type="checkbox" checked={item.isflag} onChange={(e) => this.props.changeFlagy(e.target.checked,item.id)} />
                                    <dt></dt>
                                    <dd>
                                        <p>{item.title}</p>
                                        <p>${item.price}</p>
                                        <p>
                                            <Button onClick={()=>this.props.changeNum(true,item.id)}>-</Button>
                                            {item.num}
                                            <Button onClick={()=>this.props.changeNum(false,item.id)}>+</Button>
                                        </p>
                                    </dd>
                                </dl>
                            )
                        })
                    }
                </main>
                {
                    cartlist.length ? <footer>
                        <p>全选<input type="checkbox" checked={checkAll} onChange={(e)=>this.props.checkAllflag(e.target.checked)}/></p>
                <p>总金额：{
                        cartlist.reduce((pre,next)=>{
                            return next.isflag? (pre+next.num*next.price) : pre
                        },0)
                    }</p>
                        <Button className="dbtn" onClick={this.submit}>提交订单</Button>
                    </footer> : null
                }
            </div>
        )
    }
    //提交订单
    submit=()=>{
        axios.post('/api/addShop',{
            list:this.props.cartlist.filter((item:rclass)=>item.isflag)
        }).then(res=>{
            console.log(res)
        })
    }
}
let stateMapToProps = (state: any) => {
    console.log(state)
    return {
        cartlist: state.list.cartList,
        checkAll: state.list.checkAll
    }
}
let DispatchMapToProps = (dispatch: any) => {
    return {
        changeNum(flag:boolean,id:number){
            dispatch({type:"CHANGE_COUNT",flag,id})
        },
        changeFlagy(checked:boolean,id:number){
            dispatch({type:"CHANGE_FLAG",checked,id})
        },
        checkAllflag(checkall:boolean){
            dispatch({type:"CHECK_ALL",checkall})
        }
    }
}
export default connect(stateMapToProps, DispatchMapToProps)(Cart)
